<template>
	<div class="sidebar" id="sidebar">
		<el-menu
			class="sidebar-el-menu"
			:default-active="getActive"
			:collapse="collapse"
			background-color="#00284d"
			text-color="#bfcbd9"
			active-text-color="#fff"
			:unique-opened="true"
			router
		>
			<template v-for="(item, index) in sidebarData">
				<template v-if="item.permissions && item.permissions.length != 0">
					<el-submenu :index="item.name" :key="index">
						<!-- 一级菜单 -->
						<template slot="title">
							<i :class="item.icon"></i>
							<span slot="title">{{ item.name }}</span>
						</template>
						<template v-for="(subItem, sindex) in item.permissions">
							<!-- 二级菜单 -->
							<el-menu-item :index="getSplit(subItem.resource)" :route="{ path: subItem.resource }" :key="sindex">{{
								subItem.name
							}}</el-menu-item>
						</template>
					</el-submenu>
				</template>
				<!-- 一级菜单 -->
				<template v-else>
					<el-menu-item :index="getSplit(item.resource)" :route="{ path: item.resource }" :key="index">
						<i :class="item.icon"></i>
						<span slot="title">{{ item.name }}</span>
					</el-menu-item>
				</template>
			</template>
		</el-menu>
	</div>
</template>

<script>
	import { mapState } from 'vuex';
	import bus from '../common/bus';
	export default {
		data() {
			return {
				collapse: false,
				sidebarData: []
			};
		},
		watch: {},
		activated() {
			bus.$on('collapse', (msg) => {
				this.collapse = msg;
				bus.$emit('collapse-content', msg);
			});
			this.init();
		},
		methods: {
			init() {
				this.getSidebar();
			},
			async getSidebar() {
				try {
					const url = '/user/menus';
					const { data: res } = await this.$http[4].get(url, {
						params: {
							serviceId: localStorage.getItem('code')
						}
					});
					console.log('侧边栏', res);
					this.sidebarData = res.data;
					console.log('sss:', this.sidebarData);
				} catch (err) {
					console.dir(err);
					this.$message.error({
						message: err.data.message,
						duration: 1500
					});
				}
			},
			getSplit(path) {
				return path.split('/')[1];
			}
		},
		computed: {
			getActive() {
				var path = this.$route.path.split('/');
				console.log(path);
				return path[1];
			}
		}
	};
</script>

<style lang='scss'>
	#sidebar {
		&.sidebar {
			.el-menu {
				.el-submenu {
					.el-submenu__title {
						background-color: #00284d !important;
						&:hover {
							background-color: #00203e !important;
						}
					}
				}
			}
		}
		.el-menu--inline.el-menu > .el-menu-item.is-active {
			background-color: #008fe0 !important;
		}
		.el-menu--inline.el-menu > .el-menu-item {
			background-color: #001528 !important;
		}

		.el-menu--inline.el-menu > .el-menu-item:hover {
			background-color: #008fe0 !important;
		}
		&.sidebar {
			display: block;
			position: absolute;
			left: 0;
			top: 70px;
			bottom: 0;
			overflow-y: scroll;
		}
		&.sidebar::-webkit-scrollbar {
			width: 0;
		}
		.sidebar-el-menu:not(.el-menu--collapse) {
			width: 200px;
		}
		&.sidebar > ul {
			height: 100%;
		}
	}
</style>
